<template>
  <div>
    <el-table
        :data="fundData"
        border
        stripe
        v-loading="loading"
        style="width: 100%"
        @sort-change="sortChange"
    >
      <el-table-column
          prop="code"
          label="基金代码"
          sortable
      ></el-table-column>
      <el-table-column
          prop="name"
          label="基金名称"
          sortable
      ></el-table-column>
      <!--      <el-table-column-->
      <!--          prop="type"-->
      <!--          label="基金类型"-->
      <!--          sortable-->
      <!--      ></el-table-column>-->
      <!--      <el-table-column-->
      <!--          prop="manager"-->
      <!--          label="基金经理"-->
      <!--          sortable-->
      <!--      ></el-table-column>-->
      <el-table-column
          prop="netValue"
          label="净值"
          sortable
      ></el-table-column>
      <el-table-column prop="dailyGrowth" label="日涨幅" sortable></el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="text-align: center; margin-top: 20px;"
    ></el-pagination>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      fundData: [{
        'code': '000001', 'name': 'hello', 'netValue': 1.0, 'dailyGrowth': 0.1
      }],
      loading: false,
      pageSize: 10,
      currentPage: 1,
      total: 4687,
      sortData: {
        prop: '',
        order: '',
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.loading = true;
      axios({
        method: 'get',
        url: 'http://localhost:5000/fund/',
        params: {
          page: this.currentPage,
          size: this.pageSize,
          sort: this.sortData.prop,
          order: this.sortData.order,
        },
      }).then((response) => {
        // console.log(response.data)
        this.fundData = response.data;
        this.loading = false;
      }).catch((error) => {
        console.log(error);
      })
      ;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    sortChange({prop, order}) {
      this.sortData.prop = prop;
      this.sortData.order = order;
      this.fetchData();
    },
  },
};
</script>